<template>
  <el-container style="height: 100%;">
    <el-aside width="auto">
      <el-menu :collapse='!showSidebar' :default-active="this.$route.path"
               class="el-menu-vertical-demo" text-color="#595959">
        <!-- logo -->
        <div style="color: #1890ff; height: 40px; text-align: center; ">
          <h1 style="font-size: 20px;" v-if="showSidebar">{{$GLOBAL.constant.title}}</h1>
          <h1 v-if="!showSidebar">{{$GLOBAL.constant.titleMin}}</h1>
        </div>

        <!-- 菜单树 -->
        <template v-for="item in menuList">
          <el-submenu :index="item.url" :key="item.id" v-if="item.children.length != 0">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item :index="child.url" :key="child.id" @click="menuAction(child.url)"
                          style="margin-left: 10px;" v-for="child in item.children">
              {{child.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.url" :key="item.id" @click="menuAction(item.url)" v-if="item.children.length === 0">
            <i :class="item.icon"></i>
            <span @click="menuAction(item.id)" slot="title">{{item.name}}</span>
          </el-menu-item>
        </template>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header>

        <!-- 菜单树控制按钮 -->
        <span>
          <i :class="showSidebar ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click.stop="switchSidebar"
             style="font-size: 25px;cursor:pointer;"></i>
        </span>

        <!-- 右侧 -->
        <div class="header-right">
          <el-dropdown style="margin-left: 5px;">
            <span class="el-dropdown-link">
              <i class="el-icon-user-solid" style="font-size: 20px">
                <span style="font-size: 15px; margin-left: 5px; ">{{loginUser.name}}</span>
              </i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="padding-bottom: 4px;">
              <el-dropdown-item
                @click.native="menuAction('/loginDetail',{code: loginUser.code})">个人中心
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="menuAction('/modifyPassword',{code: loginUser.code})">修改密码
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      showSidebar: true, // 左侧导航栏显示
      menuList: [], // 菜单列表
      permitAPIList: [], // 有权限接口列表
      loginUser: { // 登录用户信息
        code: '',
        name: ''
      }
    }
  },
  methods: {
    logout () {
      localStorage.clear()
      this.replaceAction('/login')
    },
    switchSidebar () {
      this.showSidebar = !this.showSidebar
    },
    menuAction (url, query) {
      this.$router.push({path: url, query: query})
    },
    // replace 跳转
    replaceAction (url) {
      this.$router.replace({path: url, query: {}})
    }
  },
  created () {
    let vm = this

    // 登录校验
    let token = localStorage.getItem(this.$GLOBAL.localStoreKey.token)
    if (token === null || token === '') {
      this.$router.replace('/login')
    }

    // 获取登录用户信息
    vm.$axios.get(this.$API.others.getLoginInfo).then(response => {
      if (response.data.code === 2000) {
        for (let key in this.loginUser) {
          this.loginUser[key] = response.data.data[key]
        }
      } else {
        vm.$router.replace('/login')
      }
    }).catch(error => {
      console.log(error)
    })

    // 加载菜单树
    vm.$axios.get(this.$API.others.menuTree).then(response => {
      if (response.data.code === 2000) {
        vm.menuList = response.data.data
      }
    }).catch(error => {
      console.log(error)
      vm.$message.error(error)
    })

    // 加载有权限API集合
    vm.$axios.get(vm.$API.others.permitApis).then(response => {
      if (response.data.code === 2000) {
        localStorage.setItem(vm.$GLOBAL.localStoreKey.permitAPIList, response.data.data)// 接口列表
      } else {
        vm.$message.error(response.data.message)
        vm.$router.replace('/login')
      }
    }).catch(response => {
      console.log(response)
      vm.$router.replace('/login')
    })
  },
  // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
  beforeRouteEnter (to, from, next) {
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
    next()
  },
  // 去除背景色
  beforeRouteLeave (to, from, next) {
    document.querySelector('body').setAttribute('style', '')
    next()
  }
}
</script>

<style scoped>

  * {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .header-right {
    display: inline-block;
    position: absolute;
    right: 50px;
    line-height: 64px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: 100%;
  }

  .el-menu-vertical-demo, .el-menu--collapse {
    min-height: 100%;
  }

  .el-header, .el-footer {
    background-color: #FFFFFF;
    color: #333;
    /*text-align: center;*/
    line-height: 70px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    /*text-align: center;*/
    /*line-height: 200px;*/
  }

  .el-main {
    background-color: #F7F8FB;
    color: #333;
    padding-top: 20px;
    padding-left: 20px;
  }

</style>
